---
target: Umo Editor Next
keywords: Umo Editor Next,Umo Editor 官网,富文本编辑器,文档编辑器,文档编辑,协同办公
description: Umo Editor 是一个基于 Vue3 和 Tiptap 的本土化开源文档编辑器，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。
---

# 页面侧边栏

页面侧边栏（页边栏）本质上是一个可配置的插槽，它允许您向其中添加自定义内容，以实现个性化内容展示，也可以和工具栏实现联动，见[工具栏扩展](./toolbar)。

[AI 聊天助手](./chat)就是通过页边栏实现的，具体展示效果见[AI 聊天助手](./chat#效果截图)。

## 演示视频

<video src="https://s1.umodoc.com/videos/aside.mp4" controls="true"></video>

## 页边栏配置

```js
const defaultOptions = {
  // 页边栏相关配置
  page: {
    aside: {
      show: [], 
      extensions: [],
    },
  },
}
```

## 配置项说明

### page.aside.show 

**说明**：页边栏显示配置，您也可以通过 `openAside`、`closeAside` 方法来动态显示或隐藏页面侧边栏。

**类型**：`Array`

**配置项示例**

```js
aside: {
  show: ['office', 'plugins'], // 按数组顺序依次显示
},
```

### page.aside.extensions 

**说明**：页边栏扩展配置，可通过此配置动态注入个性化页边栏。

**类型**：`Array`

**配置项**

- `title`：`String`，自定义扩展页边栏的显示名称。
- `key`：`String`，自定义扩展页边栏的唯一标识，是插槽注入的重要依据，不允许和默认分组标识重复。目前不可设置值有 `chatPage` 等。

**配置项示例**

```js
aside: {
  extensions: [
    // 数组中的每一项代表一个新的分组
    { title: '办公助手', key: 'office' },
    { title: '扩展插件', key: 'plugins' },
  ],
},
```

**插槽配置项**

插槽设置和标准的工具栏插槽格式相同，其中标识为`#page_aside_{key}` 依据扩展配置项中`key`值来处理。

**插槽示例**

```vue
<template #page_aside_office="props">
  <span>page_aside_office slot：{{ props }}</span>
</template>
<template #page_aside_plugins="props">
  <span>page_aside_plugins slot：{{ props }}</span>
</template>
```

## 页边栏插槽

通过具名插槽，向页边栏插入自定义内容。

```vue
<template>
  <umo-editor v-bind="options">
    <template #page_aside_office="props">
      <span>page_aside_office slot：{{ props }}</span>
    </template>
    <template #page_aside_plugins="props">
      <span>page_aside_plugins slot：{{ props }}</span>
    </template>
  </umo-editor>
</template>

<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // 配置项
    // ...
    page: {
      aside: {
        show: ['office', 'plugins'],
        extensions: [
          { title: '办公助手', key: 'office' },
          { title: '扩展插件', key: 'plugins' },
        ],
      },
    },
  });
</script>
```

## 方法列表

### openAside

**说明**：根据页边栏标识展开页边栏面板。

**参数**：`extensions[].key`，String，页边栏的唯一标识符。

**返回值**：无

### closeAside

**说明**：根据标识关闭页边栏面板。

**参数**：`extensions[].key`，String，页边栏的唯一标识符。

**返回值**：无
